<template>
	<div class="login-wrap">
		<div class="main-wrap">
			<div class="box">
				<p class="name">
					<span class="left">空气质量指数</span>
					<span class="right">北京</span>
				</p>

				
			</div>
		</div>
	</div>
</template>


<script>
export default {
}
</script>

<style lang="less">
.login-wrap{
	width: 100%;
	height: 100%;
	background: url('./timg.jpg');
	background-size: 100% 100%;
	position: fixed;
	left: 0;
	top: 0;
	.main-wrap{
		width: 100%;
		height: 100%;
		position: relative;
		.box{
			width: 80%;
			height: 0;
			padding-bottom: 80%;
			margin: 80px 10% 0 10%;
			border: #fff solid 3px;
			.name{
				font-size: 0px;
				.left{
					display: inline-block;
					width: 50%;
					font-size: 12px;
					text-align: center;
				}
				.right{
					width: 50%;
					display: inline-block;
					font-size: 22px;
					text-align: center;
					font-weight: 700;

				}
			}
		}

	}
}



</style>